<template>
  <!-- 遮罩层 -->
  <view v-if="visible" class="modal-mask" @tap="closeModal">
    <!-- 模态框内容 -->
    <view class="modal-container" @tap.stop style="background: url('/static/conpany/modalBg.png') no-repeat;">
      <view class="modal-header">
        <!-- <text class="modal-title">{{ title }}</text> -->
        <text class="modal-close" @tap="closeModal">&times;</text>
      </view>
      <view class="modal-body">
        <slot></slot>
      </view>
      <!-- <view class="modal-footer">
        <button @tap="closeModal">取消</button>
        <button type="primary" @tap="confirm">确定</button>
      </view> -->
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Modal',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      default: '提示'
    }
  },
  emits: ['update:visible', 'confirm'],
  setup(props, { emit }) {
    const closeModal = () => {
      emit('update:visible', false);
    };
    
    const confirm = () => {
      emit('confirm');
      closeModal();
    };
    
    return {
      closeModal,
      confirm
    };
  }
});
</script>

<style scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-container {
  width: 92%;
  /* background-color: #fff; */
  border-radius: 26rpx;
  overflow: auto;
  height: 82%;
  border: 1px solid #ccc;
}
.modal-container::-webkit-scrollbar {
	display: none;
}

.modal-header {
  /* padding: 16rpx; */
  padding-top: 40rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* background: greenyellow; */
}

.modal-close {
	position: fixed;
	top: 120rpx;
	right: 60rpx;
  font-size: 50rpx;
  cursor: pointer;
}

.modal-body {
  display: flex;
  flex-direction: column;
  /* padding: 20px; */
  /* background: pink; */
  padding-bottom: 30rpx;
}
</style>